Snotify Codebase Architecture & Product Overview


Table of Contents


1. Product Vision

Snotify is a modern, maintainable music storage and player application with playlists, albums, and a blog. It features a responsive, user-friendly UI, secure JWT authentication, and stores all media as files (not blobs) for performance and simplicity. The app is designed for easy extensibility and robust user experience.


2. High-Level Architecture

2.1. System Overview (Mermaid Diagram)

graph TD
  subgraph Frontend ["React App"]
    A1[AuthContext]
    A2[Album Grid]
    A3[Album Details]
    A4[Track Upload Dialog]
    A5[Player]
    A6[Sidebar/Topbar]
    A7[Blog/Playlists]
  end
  
  subgraph Backend ["Node.js/Express"]
    B1[Auth Routes]
    B2[Album Routes]
    B3[Track Routes]
    B4[Playlist Routes]
    B5[Blog Routes]
    B6[Static File Server]
    B7[Prisma ORM]
  end
  
  subgraph Database ["MySQL"]
    D1[User]
    D2[Album]
    D3[Song]
    D4[Playlist]
    D5[BlogPost]
    D6[PlaylistSong]
  end
  
  subgraph Storage ["Filesystem"]
    S1["uploads/albums/<album_id>/tracks/"]
    S2["uploads/<album_name>/cover.jpg"]
  end
  
  A1 -->|JWT| B1
  A2 -->|REST| B2
  A3 -->|REST| B2
  A4 -->|"REST (multipart/form-data)"| B3
  A5 -->|Audio URLs| S1
  A6 -->|Navigation| A2
  A7 -->|REST| B5
  
  B1 -->|Prisma| B7
  B2 -->|Prisma| B7
  B3 -->|Prisma| B7
  B4 -->|Prisma| B7
  B5 -->|Prisma| B7
  
  B7 -->|SQL| D1
  B7 -->|SQL| D2
  B7 -->|SQL| D3
  B7 -->|SQL| D4
  B7 -->|SQL| D5
  B7 -->|SQL| D6
  
  B2 -->|File Paths| S2
  B3 -->|File Paths| S1
  B6 -->|Serve Files| S1
  B6 -->|Serve Files| S2

2.2. Key Technologies


3. Backend Architecture

3.1. Database Schema (Prisma)

erDiagram
  USER ||--o{ PLAYLIST : owns
  USER ||--o{ BLOGPOST : writes
  ALBUM ||--o{ SONG : contains
  PLAYLIST ||--o{ PLAYLISTSONG : has
  SONG ||--o{ PLAYLISTSONG : in

3.2. API Routing & Logic

Routing Example:

graph TD
FE[Frontend] -- POST /api/albums --> BE[Backend]
BE -- Prisma --> DB[(MySQL)]
BE -- File Upload --> FS[(Filesystem)]

3.3. File Storage

3.4. Authentication


4. Frontend Architecture

4.1. UI Structure

graph TD
  Sidebar --nav--> MainContent
  MainContent --select--> Dialogs
  MainContent --play--> Player

4.2. State Management

4.3. Responsive Design


5. Developer Experience


6. Product Management View


7. Security & Compliance


8. Extensibility & Future Roadmap


Appendix: Directory Structure